/* pages/shopDetails/shopDetails.wxss */
@import "../../app.less";

.shopBox {
  width: 100%;
  padding-bottom: 50rpx;

  .shopInfo {
    overflow: hidden;
    color: @c_fff;
    box-sizing: border-box;
    padding: 40rpx;
    padding-left: 40rpx;
    position: relative;
    width: 700rpx;
    height: 600rpx;
    background-color: @c_1A1A1A;
    top: -50rpx;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: rgba(61, 58, 58, .5) 0px -20px 40px 1px,
      rgba(61, 58, 58, .5) 40px -10px 40px -1px,
      rgba(61, 58, 58, .5) -40px -10px 40px -1px;
  }

  .shopInfo .score {
    position: absolute;
    top: 0;
    right: 40rpx;
    background-color: @c_4050B5;
    color: @c_fff;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 36rpx;
    font-weight: 900;
  }

  .shopInfo .name {
    font-size: 38rpx;
  }

  .shopInfo .perCapita {
    font-size: 26rpx;
    margin-top: 20rpx;
  }

  .shopInfo .businessTime {
    margin-top: 15rpx;
    font-size: 26rpx;
    display: flex;
    vertical-align: middle;
  }

  .shopInfo .label {
    display: inline-block;
    vertical-align: middle;
    background-color: @c_4050B5;
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    border-radius: 5px;
  }

  .shopInfo .labelBox {
    margin-top: 20rpx;
    font-size: 24rpx;
  }

  .shopInfo .labelBox .label {
    background-color: @c_7232DD;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

  .shopInfo .address {
    overflow: hidden;
    white-space: nowrap;
    // display: flex;
    // justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    margin-top: 10rpx;
    font-size: 24rpx;
    border-bottom: 1px solid rgb(78, 76, 76);
  }

  .shopInfo .now {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 24rpx;
    padding-bottom: 10rpx;
    padding-top: 10rpx;
    padding-left: 30rpx;
    padding-right: 40rpx;
    border-top-left-radius: 20px;
    background-color: rgb(92, 91, 91);
  }

  .zone {
    overflow: hidden;
    width: 700rpx;
    height: auto;
    // background-color: @c_1A1A1A;
    margin: 0 auto;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 24rpx;
  }

  .zone .hairstylist {
    position: relative;
    width: 100%;
    background-color: @c_1A1A1A;
    border-radius: 8px;
    margin-top: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    color: @c_fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .zone .zoneHairstylist {
    position: absolute;
    top: 0;
    right: 30rpx;
    padding-left: 10rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    padding-right: 10rpx;
    background-color: rgb(194, 162, 19);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .zone .zoneHairstylist.sleep {
    background-color: rgb(133, 139, 139);
  }

  .zone .btn {
    border-radius: 10px;
    margin-top: 20rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    background-color: cadetblue;
  }

  .zone .btn.zp {
    background-color: @c_4050B5;
  }

  .zone .btn.qh {
    background-color: @c_4050B5;
  }

  .zone .btn.yy {
    background-color: @c_4050B5;
  }

  .zone .messageBox {
    color: @c_fff;
    margin-top: 20rpx;
    background-color: @c_1A1A1A;
    padding: 20rpx;
    border-radius: 6px;
  }

  .zone .messageBox .contentBox {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    margin-left: 110rpx;
    white-space: wrap;
    word-wrap: break-word;
  }

  .zone .messageBox .time {
    font-size: 24rpx;
  }

  .zone .messageBox .headerBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .van-tabs__scroll {
    background-color: transparent;
  }

  .van-tab--active {
    color: @c_4050B5;
  }

  .van-tab {
    color: @c_fff;
  }
}